<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>选项卡</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul,
    li {
      list-style: none;
    }

    .wrapper {
      margin: 30px auto;
      width: 800px;
    }

    .header {
      width: 602px;
      border: 1px solid #000;
    }

    .header:after {
      display: block;
      content: '';
      visibility: hidden;
      clear: both;
    }

    .header li {
      float: left;
      width: 200px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      font-size: 18px;
      cursor: pointer;
    }

    .header li.active {
      background: yellow;
    }

    .header li:nth-child(2) {
      border-left: 1px solid #000;
      border-right: 1px solid #000;
    }

    .wrapper div {
      display: none;
      height: 200px;
      width: 602px;
      border: 1px solid #000;
      line-height: 200px;
      text-align: center;
      font-size: 20px;
    }

    .wrapper div.active {
      display: block;
    }
  </style>
</head>

<body>
  <div class="wrapper" id="wrapper">
    <ul id="header" class="header">
      <li class="active">实事</li>
      <li>音乐</li>
      <li>时尚</li>
    </ul>
    <div class="active">实事</div>
    <div>音乐</div>
    <div>时尚</div>
  </div>
  <script src="./函数封装.js"></script>
</body>

</html>